<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.w3.org/1999/xhtml">
<head th:replace="back/include :: header">
</head>
<body>
<form class="layui-form" id="searchForm" style="padding-top: 15px;">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户姓名：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="请输入用户姓名" name="name" id="name" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">手机号码：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="请输入手机号码" name="mobile" id="mobile" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户状态：</label>
            <div class="layui-input-inline">
                <select name="state" lay-filter="status" id="state">
                    <option value="" selected>全部</option>
                    <option value="0">正常</option>
                    <option value="1">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">创建时间：</label>
            <div class="layui-inline">
                <input type="text" class="layui-input" name="startTime" id="startTime" placeholder="开始时间"
                       onfocus="noInput(this)">
            </div>
            <label>-&ensp;</label>
            <div class="layui-inline">
                <input type="text" class="layui-input" name="endTime" id="endTime" placeholder="截止时间"
                       onfocus="noInput(this)">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户类型：</label>
            <div class="layui-input-inline">
                <select name="type" lay-filter="status" id="type">
                    <option value="" selected>全部</option>
                    <option value="0">普通</option>
                    <option value="1">儿童</option>
                    <option value="2">大学生</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">用户性别：</label>
            <div class="layui-input-inline">
                <select name="sex" lay-filter="status" id="sex">
                    <option value="" selected>全部</option>
                    <option value="0">女</option>
                    <option value="1">男</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">公司名称：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="请输入组织或公司名称" name="orgName" id="orgName" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">毕业院校：</label>
            <div class="layui-input-inline">
                <input class="layui-input" placeholder="请输入毕业院校名称" name="school" id="school" autocomplete="off">
            </div>
        </div>
        <div class="layui-inline" style="float:right; right:20px;">
            <button shiro:hasPermission="common:uer:list"  type="button" class="layui-btn" data-type="reload" id="search">搜索</button>
            <button shiro:hasPermission="common:uer:list"  type="button" class="layui-btn layui-btn-primary" data-type="reload" id="clear">重置</button>
            <button shiro:hasPermission="common:uer:add"  type="button" style="visibility:hidden!important" class="layui-btn" id="add"><i class="layui-icon">&#xe608;</i>新增</button>
        </div>
    </div>

    </div>
</form>
<table class="layui-hide" id="demoTable" lay-filter="tableFilter"></table>

<!--弹出框-->
<form class="layui-form " id="userInfo" style="display:none">
    <div class="layui-col-md12" style="padding:20px 20px 0px 20px">
        <input type="hidden" id="_id">
        <div class="layui-col-md6" style="padding-right:40px">
            <div class="layui-form-item">
                <label class="layui-form-label">用户姓名</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="用户姓名" name="name" id="_name" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="手机号码" name="mobile" id="_mobile" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户类型</label>
                <div class="layui-input-block">
                    <select  lay-filter="status" id="_type" name="type">
                        <option value="0">普通</option>
                        <option value="1">儿童</option>
                        <option value="2">大学生</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户性别</label>
                <div class="layui-input-block">
                    <select lay-filter="status" id="_sex" name="sex">
                        <option value="0">女</option>
                        <option value="1">男</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户状态</label>
                <div class="layui-input-block">
                    <select lay-filter="status" id="_state" name="state">
                        <option value="0">正常</option>
                        <option value="1">封禁</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="身份证号" name="idCardNumber" id="_idCardNumber"
                           autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户住址</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="用户住址" name="address" id="_address" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户邮箱</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="用户住址" name="email" id="_email" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">监护人姓名</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="监护人姓名" name="oldMame" id="_oldName" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">监护人电话</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="监护人电话" name="oldMobile" id="_oldMobile"
                           autocomplete="off">
                </div>
            </div>
        </div>
        <div class="layui-col-md6" style="padding-right:40px">

            <div class="layui-form-item">
                <label class="layui-form-label">公司名称</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="组织或公司名称" name="orgName" id="_orgName" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">企业代码</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="企业统一代码" name="orgNum" id="_orgNum" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">毕业院校</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="毕业院校" name="school" id="_school" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">学号</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="学号" name="schoolNum" id="_schoolNum" autocomplete="off">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">注册时间</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="注册时间" name="createTime" id="_createTime" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">最终修改</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="最后修改时间" name="updateTime" id="_updateTime"
                           autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公益积分</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="爱心公益积分" name="lovePoint" id="_lovePoint" autocomplete="off">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">捐赠总额</label>
                <div class="layui-input-block">
                    <input class="layui-input" placeholder="捐赠总额" name="loveFund" id="_loveFund" autocomplete="off">
                </div>
            </div>

        </div>
    </div>


</form>
<script type="text/javascript">
    let tableIns;
    //加载下拉框
    layui.use(['laydate', 'laypage', 'layer', 'table', 'form'], function () {
        let layer = layui.layer //弹层
            , table = layui.table //表格
            , form = layui.form,
            laydate = layui.laydate; //元素操作
        //执行一个 table 实例
        tableIns = table.render({
            elem: '#demoTable'
            , url: '/back/user/list'
            , method: 'post'
            , contentType: 'application/json'
            , id: 'demoTable'
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.status, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": res.data //解析数据列表
                };
            }
            , where: {}
            , response: {
                statusCode: 1 //规定成功的状态码，默认：0
            }
            , page: true //开启分页
            , cols: [
                [
                    /*{type:'checkbox'}*/
                    {field: 'name', title: '用户姓名', align: 'center'}
                    , {
                    field: 'sex', title: '用户性别', align: 'center', templet: function (d) {
                        return d.sex == '0' ? '女' : d.sex == '1' ? '男' : '未知';
                    }
                }
                    , {field: 'orgName', title: '公司名称', align: 'center'}
                    , {field: 'school', title: '毕业院校', align: 'center'}
                    , {field: 'mobile', title: '手机号码', align: 'center'}
                    , {
                    field: 'type', title: '用户类型', align: 'center', templet: function (d) {
                        return d.type == '0' ? '普通' : d.type == '1' ? '儿童' : '大学生';
                    }
                }
                    , {
                    field: 'lovePoint', title: '爱心积分', align: 'center', templet: function (d) {
                        return d.lovePoint == '' ? 0 : d.lovePoint;
                    }
                }
                    , {
                    field: 'loveFund', title: '捐赠金额', align: 'center', templet: function (d) {
                        return (d.loveFund == '' ? 0 : d.loveFund)+"元";
                    }
                }
                    , {
                    width: '10%', field: 'createTime', title: '创建时间', align: 'center', templet: function (d) {
                        return layui.util.toDateString(parseInt(d.createTime) * 1000, "yyyy-MM-dd HH:mm:ss");
                    }
                }
                    , {
                    field: 'state', title: '用户状态', align: 'center', templet: '#checkboxS'
                }
                    , {width: '10%', title: '操作', align: 'center', toolbar: '#bar'}
                ]
            ]
        });
        //常规用法
        laydate.render({
            elem: '#startTime'
            , trigger: 'click'
        });
        laydate.render({
            elem: '#endTime'
            , trigger: 'click'
        });
        $("#search").bind("click", function () {
            searchForm();
        });

        $("#clear").bind("click", function () {
            $("#searchForm").clearForm();
            searchForm();
        });


        /*ESC关闭弹窗*/
        $(document).ready(function () {
        }).keydown(
            function (e) {
                if (e.which === 27) {
                    layer.closeAll();
                }
            });
        form.on('switch(release)', function(obj){
            let value = obj.value.split(",")[0];
            let name = obj.value.split(",")[1];
            layer.confirm('确定要禁用账户     "'+name+'"     ?',function(){
                let data={id:value,state:obj.elem.checked?0:1}
                saveData("/back/user/update",data);
            });
            searchForm();
        });

        form.on('select(status)', function (data) {
            searchForm();
        });
        form.on('submit(formDemo)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            return false;
        });
        table.on('tool(tableFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'info') { //详情
                getEditData(data['id']);
                openLayer('查看用户信息', '/back/sysUser/update', 1);
            }else if(layEvent==='lovePoint'){
                location.href="/back/lovePoint/love?name="
                    +(data['name']==null?"":data['name'])+"&mobile="+(data['mobile']==null?"":data['mobile']);
            }
        });

    });
    //让时间插件无法选中 达到禁止手输的目的
    function noInput(dom) {
        $(dom).blur();
    }
    function saveData(url, data) {
        $.ajax({
            type: "post",
            url: url,
            data: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status + "," + XMLHttpRequest.readyState + ","
                    + textStatus + "," + errorThrown);
            },
            success: function (result) {
                if (result["status"] == 1) {
                    layer.closeAll();
                    layer.msg(result["msg"]);
                    searchForm();
                } else {
                    layer.alert(result['msg']);
                }
            }
        });
    }

    function getEditData(data) {
        $("#userInfo").clearForm();
        $.ajax({
            type: "post",
            url: "/back/user/info",
            data: JSON.stringify({"userId": data}),
            headers: {
                'Content-Type': 'application/json;charset=utf-8'
            },
            dataType: 'json',
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log(XMLHttpRequest.status + "," + XMLHttpRequest.readyState + ","
                    + textStatus + "," + errorThrown);
            },
            success: function (result) {
                if (result['status'] == 1) {
                    let data = result["data"];
                    $.each(data,function(key,value){
                        $("#_"+key).val(value);
                        $("#_"+key).attr("disabled",true);
                    });
                    $("select").css("color", "black!important");
                    layui.use(['form'], function () {
                        layui.form.render("select");
                    });
                } else {
                    layui.alert(result['msg']);
                }
            }
        });
    }

    function openLayer(titleName, url, type) {
        layer.open({
            type: 1,
            area: ['1000px', '650px'],
            title: titleName
            , content: $("#userInfo"),
            shade: 0.3,
            resize: false,
            moveType: 1,//可拖动
            moveOut: true,//可拖动移出
            shadeClose:true,//点击遮罩关闭弹窗
            btn: ['返回']
            ,
            btn1: function (index, layero) {
                layer.closeAll();
            },
            cancel: function (layero, index) {
                layer.closeAll();
            }
        });
    }
    function trimData(data){
        let result={};
        $.each(data,function(index,value){
            if(value!="")
                result[index]=value;
        });
        return result;
    }
    function searchForm() {
        layui.use('table', function () {
            let data = {name : $("#name").val(),
                mobile : $("#mobile").val(),
                state : $("#state").val(),
                type : $("#type").val(),
                sex : $("#sex").val(),
                orgName : $("#orgName").val(),
                school : $("#school").val(),
                startTime : $("#startTime").val(),
                endTime : $("#endTime").val()}
            if (startTime != "" && endTime != "") {
                if (startTime > endTime) {
                    layer.msg('时间起始不可大于时间截止！');
                    $("#endTime").val("");
                    return;
                }
            }
            let table = layui.table;
            table.reload('demoTable', {
                where: trimData(data)
                , page: {
                    curr: 1 //重新从第 1 页开始
                },done: function (res, curr, count) {
                    this.where={};
                }
            });
        });
    }

</script>
<script type="text/html" id="bar">
    <a shiro:hasPermission="common:uer:list" class="layui-btn layui-btn-xs" lay-event="info">查看详情</a>
    <a shiro:hasPermission="common:integral:list" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="lovePoint">爱心积分</a>
</script>
<script id="checkboxS" type="text/html">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" value="{{d.id+','+d.name}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="release" {{ d.state== 0
           ? 'checked' : '' }}    >
</script>
</body>
